{% extends "admin/base_site.html" %}
{% load static %}

{% block extrastyle %}
    {{ block.super }}
    <style>
        .import-container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
        }
        .step {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .step.active {
            border-color: #79aec8;
            background-color: #f5f9fa;
        }
        .step-number {
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            background-color: #79aec8;
            color: white;
            border-radius: 12px;
            margin-right: 10px;
        }
        .preview-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        .preview-table th, .preview-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        .preview-table th {
            background-color: #f5f9fa;
        }
        .error-message {
            color: #ba2121;
            margin-top: 5px;
        }
        .success-message {
            color: #2e7d32;
            margin-top: 5px;
        }
        .help-text {
            color: #666;
            font-size: 0.9em;
            margin-top: 5px;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="import-container">
        <h1>导入试题</h1>

        <div class="step {% if step == 1 %}active{% endif %}">
            <span class="step-number">1</span>
            <h2 style="display: inline;">选择文件</h2>
            {% if step == 1 %}
                <form method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <input type="hidden" name="step" value="1">
                    <div>
                        <input type="file" name="file" accept=".xlsx,.xls,.doc,.docx" required>
                        <p class="help-text">支持的文件格式：Excel (.xlsx, .xls) 或 Word (.doc, .docx)</p>
                    </div>
                    <div style="margin-top: 10px;">
                        <label>
                            <input type="checkbox" name="has_header" checked>
                            Excel文件包含表头
                        </label>
                    </div>
                    <button type="submit" class="default" style="margin-top: 10px;">上传文件</button>
                </form>
            {% endif %}
        </div>

        <div class="step {% if step == 2 %}active{% endif %}">
            <span class="step-number">2</span>
            <h2 style="display: inline;">确认格式</h2>
            {% if step == 2 %}
                <form method="post">
                    {% csrf_token %}
                    <input type="hidden" name="step" value="2">
                    <input type="hidden" name="file_path" value="{{ file_path }}">

                    <div>
                        <label>选择科目：</label>
                        <select name="subject" required>
                            {% for subject in subjects %}
                                <option value="{{ subject.id }}">{{ subject.name }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    {% if preview_data %}
                        <h3>数据预览</h3>
                        <table class="preview-table">
                            <thead>
                                <tr>
                                    <th>题干</th>
                                    <th>题型</th>
                                    <th>选项</th>
                                    <th>答案</th>
                                    <th>难度</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for row in preview_data %}
                                    <tr>
                                        <td>{{ row.content }}</td>
                                        <td>{{ row.question_type }}</td>
                                        <td>{{ row.options }}</td>
                                        <td>{{ row.answer }}</td>
                                        <td>{{ row.difficulty }}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    {% else %}
                        <p class="error-message">无法预览数据</p>
                        {{file_path}}
                    {% endif %}

                    <button type="submit" class="default" style="margin-top: 10px;">确认导入</button>
                </form>
            {% endif %}
        </div>

        <div class="step {% if step == 3 %}active{% endif %}">
            <span class="step-number">3</span>
            <h2 style="display: inline;">导入结果</h2>
            {% if step == 3 %}
                <div>
                    {% if success %}
                        <p class="success-message">
                            成功导入 {{ imported_count }} 道试题
                            {% if error_count > 0 %}
                                ，{{ error_count }} 道试题导入失败
                            {% endif %}
                        </p>
                    {% else %}
                        <p class="error-message">导入过程中出现错误</p>
                    {% endif %}

                    {% if errors %}
                        <h3>错误详情：</h3>
                        <ul>
                            {% for error in errors %}
                                <li class="error-message">{{ error }}</li>
                            {% endfor %}
                        </ul>
                    {% endif %}

                    <a href="{% url 'admin:exam_system_question_changelist' %}" class="button">
                        返回试题列表
                    </a>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}